<template>
  <div>
    <div class="page-content page-520hd">
      <div class="hd-top">
      </div>
      <div class="hd-bot">
        <a href="javascript:;" class="btn-lq" @click="getYhq()" v-show="!checkGet">立即领取</a>
        <router-link :to="{name:'coupon'}" class="btn-lq" v-show="checkGet">已领取，前往查看</router-link>
        <router-link :to="{name:'520hd-rule'}" class="view-rule">吃货券使用规则 &gt;</router-link>
      </div>
      <a href="javascript:;" @click="goBack()" class="return-btn"><icon symbol="close"> </icon></a>
    </div>
    <router-view transition="hd" class="page-520rule" transition-mode="out-in"></router-view>
    <transition name="hdmodal">
      <div class="hd-modal-wraper" v-show="modalVisible" >
        <div class="hd-modal">
          <div class="hd-modal-image"><img src="../../assets/520HD-2.png" alt=""></div>
          <router-link :to="{name:'coupon'}">前往查看</router-link>
          <span class="close" @click="modalVisible=false"><i class="iconfont icon-tubiao06"></i></span>
        </div>
      </div>
    </transition>
  </div>


</template>

<script lang="babel">
  import api from '@api'
  import Icon from '@components/icon.vue'
  export default {
    components: {
      Icon
    },
    data() {
      return {
        hdBotHeight: '0rem',
        modalVisible: false,
        checkGet: false,
        isFirst: true
      }
    },
    async mounted() {
      let {data: {StatusCode}} = await api.get('api/v1/Coupon/haveCouponAll.ashx')
      if (StatusCode !== '200') {
        this.checkGet = true
      }
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      async getYhq () {
        let self = this;
        let {data: {StatusCode}} = await api.get('api/v1/Coupon/addCouponAll.ashx');
        if (StatusCode === '200') {
          this.modalVisible = true;
          this.checkGet = true;
        }
      },
    }
  }
</script>

<style lang="less">
  @import "index.less";
</style>
